<template>
  <el-dialog
    v-bind="$attrs"
    v-model="visible"
    class="dialog-view"
    width="500px"
    append-to-body
    destroy-on-close
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    draggable
  >
    <template v-for="(_, name) in $slots" :key="name" #[name]="scope">
      <slot :name="name" v-bind="scope"></slot>
    </template>
    <template #footer v-if="hasFooter && !$slots['footer']">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" :loading="onSubmitting" :disabled="onSubmitting" @click="submit">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
const props = defineProps({
  hasFooter: {
    type: Boolean,
    default: true
  },
  modelValue: {
    type: Boolean,
    required: true
  }
});

const emit = defineEmits(["cancel", "submit", "update:modelValue"]);

const visible = computed({
  get: () => props.modelValue,
  set: val => emit("update:modelValue", val)
});
const onSubmitting = ref(false);

const setSubmitDisabled = (bool = true) => {
  onSubmitting.value = bool;
};

const done = () => {
  visible.value = false;
};

watchEffect(() => {
  if (!visible.value) {
    setSubmitDisabled(false);
  }
});

const cancel = () => {
  emit("cancel");
};
const submit = () => {
  setSubmitDisabled()
  emit("submit", setSubmitDisabled);
  setTimeout(() => {
    setSubmitDisabled(false)
  }, 1.5 * 1000)
};

onUnmounted(() => {
  setSubmitDisabled(false);
});
onActivated(() => {
  setSubmitDisabled(false);
});
</script>

<style lang="scss" scoped>
:deep(.dialog-view) {
  padding: 20px;
}
</style>
